<template>
	<view>
		<u-tabs :list="list" @change="clickTabs"></u-tabs>
		<view v-if='current==0'>
			<view v-if='dataList.length > 0'>
				<view v-for="(item,index) in dataList" :key="index">
					<view  class="mainRow mainAlignCenter" style="justify-content: space-between;padding: 50rpx;">
						<view class="mainRow mainAlignCenter">
							<u--image width="60rpx" height="56rpx" :src="item.avatar" shape="circle"></u--image>
							<text class="text36" style="margin-left: 10rpx;">{{item.username}}</text>
						</view>
						<view class="" v-if="!current">
							<image style="width: 140rpx; height: 60rpx;" src="/static/follow.png" @click="obsolescence(item.user.id , index)"></image>
						</view>
						<view class="" v-else>
							<image v-if="!item.is_follow" style="width: 140rpx; height: 60rpx;" src="/static/fans.png" @click="follow(item.user_id)"></image>
							<image v-else style="width: 140rpx; height: 60rpx;" src="/static/follow.png" ></image>
						</view>
					</view>
					<view class="line" style="margin-left: 30rpx;margin-top: -20rpx;"></view>
				</view>
			</view>
			<view v-else>暂无数据...</view>
		</view>
		<view v-if='current==1'>
			粉丝
		</view>
		<!-- 提示框 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { fansList } from '@/api/me.js'
import {  cancelUser } from '@/api/me.js'
export default{
	data() {
		return {
			dataList:[],//关注的数据
			current:0,
			list: [
				{ name: '关注'}, 
				{ name: '粉丝'} ,
			]
		}
	},
	onShow(){
		this.fansData();
	},
	methods:{
		clickTabs( o ){
			this.current = o.index;
		},
		fansData(){
			fansList({
				page:1
			}).then(res=>{
				this.dataList = res.data.list;
			})
		},
		//取消关注
		obsolescence( id  , index){
			cancelUser({ user_id: id }).then(res => {
				if( res.code != 0) return false;
				this.$refs.uToast.show({
					message: '取消关注',
					type: 'success'
				});
				this.dataList.splice( index , 1 );
			})
			.catch(err => {
				console.log(err);
			});
		}
	}
}
</script>

<style>
</style>